<template>
	<view class="content">
      <!--  <swiper class="swiper" circular indicator-active-color="#277CC0" :indicator-dots="indicatorDots"
            :autoplay="autoplay" :interval="interval" :duration="duration">
            <swiper-item v-for="(i,n) in imgList" :key="n">
               <image :src="i" mode=""></image>
            </swiper-item>
        </swiper> -->
        <view class="swiper" >
            <image  src="/static/images/userHeader.jpg" mode="aspectFit"></image>
        </view>
        <view class="plr16 ">
          
            <view class="justify-start align-center mt12" >
                  <image  :src="detail.avatar" style="border-radius: 50%;width: 120rpx;  height: 120rpx;margin-right: 20rpx;" mode="aspectFit"></image>  
                <text style="font-weight: 600;font-size: 32rpx;color: #000000;line-height: 54rpx;">街头艺人-{{detail.nickname}}</text>    
              
            </view>
            <view class="mt10" >
                    <view v-if="detail.category_name" class="cateItem">
                            {{detail.category_name}}
                    </view>
            </view>
           <view v-if="detail.video_url" class="bgWhite radius8 ptb15 plr25 mt10" >
               <video style="width: 100%;height: 360rpx;"  controls  :src="'https://www.yitianclub.cn'+detail.video_url"></video>
           </view>
                      
           
            <view class="moduleTitle ft16 ">艺人介绍    </view>
            <view class="bgWhite radius8 ptb15 plr25 ft16 " style="line-height: 56rpx;color: #3d3d3d;">
                    		<uv-parse :content="detail.content" :tagStyle="style"></uv-parse>

            </view>
           
        </view>
      
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
                
				list: [],
				chain: false,
				value: 0,
                indicatorDots: true,
                autoplay: true,
                interval: 3000,
                duration: 500,
                imgList:[],
                id:"",
                detail:{},

                    
                style:{
                    img:"max-width:100%"
                },
                

				userInfo:uni.getStorageSync('userInfo'),
				user_id:uni.getStorageSync('userId'),
				

			}
		},
		
		onLoad(opt) {
                if(opt.id) this.id = opt.id
                this.getUserInfo()
                this.getMain()
		},
		methods: {
			async getUserInfo(){
				const {data} =  await this.$api.userinfo({user_id:this.user_id})
				
				this.userInfo= data
			},
			async getMain() {
                const {data,code}  =   await this.$api.getArtMain(this.id)
                if(code==200){
                    console.log(data)
                    this.detail = data
                     this.detail.content =  this.detail.content.replaceAll('<img src="','<img src="https://www.yitianclub.cn')
                    
                }
			},
			pay(){
				if (!uni.getStorageSync('logintoken')) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
                if(!this.userInfo.realname){
                    uni.showToast({
                    	title: '当前未实名，请先完成实名认证',
                    	icon: "none"
                    })
                    setTimeout(()=>{
                      uni.navigateTo({
                          url:'/pages/idCard/index'
                      })  
                    },1000)
                    return
                }
				let vm =this
				this.$api.activityPay({
					act_id:this.id,
					openid:this.userInfo.openid,
					user_id:this.userInfo.id,
					pay_fee: this.detail.pay_fee,
					// pay_fee: 0.01,
					realname:this.userInfo.realname,
					phone:this.userInfo.phone,
				}).then(res=>{
					console.log(res)
                        
                    if(res.orderno||res.out_trade_no){
                  
					if(res.config){
						uni.requestPayment({
							provider: "wxpay",
							appId: res.config.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
							nonceStr: res.config?.nonceStr, // 随机字符串
							package: res.config.package, // 固定值
							// "partnerid": res.data.appId,      // 微信支付商户号
							// "prepayid": res.data.appId,  // 统一下单订单号
							signType: 'MD5',
							timeStamp: res.config?.timeStamp || String(Date.now()), // 时间戳（单位：秒）
							paySign: res.config.paySign, // 签名，这里用的 MD5/RSA 签名
							success(data) {
												console.log(data)
												vm.getOrderStatus(res.out_trade_no)
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
							},
							fail(e) {
								uni.showToast({
									title: '支付失败',
									icon: "error"
								})
								console.log(e)
							}
						
						})
					}else{
						uni.navigateTo({
							url:'/pages/actorderDetail/index?orderno='+res.orderno
						})
					}
                      }else{
                          uni.showToast({
                          	title: res.msg,
                          	icon: "none"
                          })
                      }
					
				})
			},
			async getOrderStatus(orderno){
				const data =await this.$api.checkactOrder({out_trade_no:orderno})
				if(data.code==200){
					uni.navigateTo({
						url:'/pages/actorderDetail/index?orderno='+orderno
					})
				}
				
			},
		}
	}
</script>
<style scoped lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	
    .notice{
        padding: 26rpx 48rpx;
        background: #FCF3EE;
        border: 2rpx solid #F3D6C6;
        font-size: 28rpx;
        color: #F3915B;
        image{
            margin-left: 86rpx;
            width: 60rpx;
        }
    }
    .paybtn{
        
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 30rpx;
        background-color: #fff;
        .onlinePay{
            width: 324rpx;
            height: 92rpx;
            background: #FFFFFF;
            border-radius: 12rpx ;
            border: 2rpx solid #2CC6A1;
            font-size: 32rpx;
            color: #2CC6A1;
            line-height: 92rpx;
            background: #2CC6A1;
            color: #fff;
            text-align: center;
        }
            
        .freebtn{
            text{
                color: #FF9012;
            }
        }
      
    }
    .moduleTitle{
        font-weight: 600;
        color: #000000;
        line-height: 54rpx;
        margin: 30rpx 0 10rpx;
    }
        
    .swiper{
        image{
            width: 100%;
            height: 300rpx;
        }
    }
    .cateItem{
       
            width: 120rpx;
            height: 54rpx;
           border: 2rpx solid #2CC6A1;
            border-radius: 60rpx ;
            font-size: 28rpx;
            color: #2CC6A1;
            text-align: center;
            line-height: 54rpx;
        
    }
</style>